<!--数据库连接编辑-->
<template>
  <div>
    <el-dialog
      :visible.sync="openDialog"
      append-to-body
      center
      :close-on-click-modal="false"
      custom-class="customDialog"
      width="600"
    >
      <div slot="title" class="dialog-title">
        <svg-icon slot="prefix" icon-class="database"   />
        <span v-text="dialogTitle"></span>
      </div>
      <el-container
        style="height: 510px"
        :element-loading-text="loadingText"
        v-loading="loading"
      >
        <el-main
          class="body-warp"
          style="height: 100%; padding:5px; padding-bottom:2px;"
        >
          <el-tabs
            v-model="activeName"
            type="border-card"
            @tab-click="handleClick"
          >
            <el-tab-pane label="一般" name="normal" style="height:387px;">
              <el-form :model="formData" label-width="130px" size="small">
                <el-form-item label="连接名称:" prop="name">
                  <el-input maxlength="40" v-model="formData.name"> </el-input>
                </el-form-item>
                <el-form-item label="连接类型:" prop="type">
                  <el-select
                    v-model="formData.type"
                    filterable
                    placeholder="请选择"
                    style="width:100%;"
                    @change="getConTypes"
                  >
                    <el-option
                      v-for="item in databaseTypes"
                      :key="item.value"
                      :label="item.text"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="连接方式:" prop="access">
                  <el-select
                    v-model="formData.access"
                    placeholder="请选择"
                    style="width:100%;"
                    @change="conTypeChange"
                  >
                    <el-option
                      v-for="item in conTypes"
                      :key="item.value"
                      :label="item.text"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item
                  v-show="formData.access == 0"
                  label="主机名称:"
                  prop="hostname"
                >
                  <el-input maxlength="40" v-model="formData.hostname">
                  </el-input>
                </el-form-item>
                <el-form-item :label="nameLabel" prop="databaseName">
                  <el-input maxlength="40" v-model="formData.databaseName">
                  </el-input>
                </el-form-item>

                <div v-show="formData.type == 'ORACLE'">
                  <el-form-item label="数据表空间:" prop="dataTablespace">
                    <el-input maxlength="40" v-model="formData.dataTablespace">
                    </el-input>
                  </el-form-item>
                  <el-form-item label="索引表空间:" prop="password">
                    <el-input maxlength="40" v-model="formData.indexTablespace">
                    </el-input>
                  </el-form-item>
                </div>
                <el-form-item
                  label="端口:"
                  prop="port"
                  v-show="formData.access == 0"
                >
                  <el-input maxlength="40" v-model="formData.port"> </el-input>
                </el-form-item>
                <div
                  v-show="
                    formData.access == 0 ||
                      formData.access == 1 ||
                      formData.access == 2
                  "
                >
                  <el-form-item label="用户名:" prop="username">
                    <el-input maxlength="40" v-model="formData.username">
                    </el-input>
                  </el-form-item>
                  <el-form-item label="密码:" prop="password">
                    <el-input maxlength="40" v-model="formData.password">
                    </el-input>
                  </el-form-item>
                </div>
              </el-form>
            </el-tab-pane>
            <el-tab-pane label="高级" name="advance" style="height:387px">
              <el-form label-position="top" size="small">
                <el-form-item label="标识符">
                  <el-checkbox v-model="formData.supportBooleanDataType"
                    >支持布尔数据类型</el-checkbox
                  >
                  <el-checkbox v-model="formData.supportTimestampDataType"
                    >支持Timestamp数据类型</el-checkbox
                  >
                  <el-checkbox v-model="formData.quoteIdentifiersCheck"
                    >标识符使用引号括起来</el-checkbox
                  >
                  <el-checkbox v-model="formData.lowerCaseIdentifiersCheck"
                    >强制标识符使用小写字母</el-checkbox
                  >
                  <el-checkbox v-model="formData.upperCaseIdentifiersCheck"
                    >强制标识符使用大写字母</el-checkbox
                  >
                  <el-checkbox v-model="formData.preserveReservedCaseCheck"
                    >Preserve case of reserved words</el-checkbox
                  >
                </el-form-item>
                <el-form-item label="默认模式名称.在没有其他模式名时使用">
                  <el-input v-model="formData.preferredSchemaName"> </el-input>
                </el-form-item>
                <el-form-item
                  label="请输入连接成功后要执行的SQL语句，用分号(;)隔开"
                >
                  <el-input
                    type="textarea"
                    :rows="3"
                    v-model="formData.connectSQL"
                  >
                  </el-input>
                </el-form-item>
              </el-form>
            </el-tab-pane>
            <el-tab-pane label="选项" name="options" style="height:387px">
              <el-button
                type="primary"
                size="mini"
                @click="addOption()"
                style=" margin-bottom:10px;"
                >添加参数</el-button
              >

              <el-table
                :data="this.formData.extraOptions"
                border
                height="330"
                style="width: 100%;"
              >
                <!--序号-->
                <el-table-column
                  type="index"
                  align="center"
                  label="行"
                  fixed
                  class-name="table-index"
                  width="49"
                />
                <el-table-column prop="name" label="命令参数" width="180">
                  <template slot-scope="scope">
                    <el-input
                      size="small"
                      v-model="scope.row.name"
                      style="width: 100%"
                    />
                  </template>
                </el-table-column>
                <el-table-column prop="value" label="值">
                  <template slot-scope="scope">
                    <el-input
                      size="small"
                      v-model="scope.row.value"
                      style="width: 100%"
                    />
                  </template>
                </el-table-column>
                <el-table-column width="80">
                  <template slot-scope="scope">
                    <el-button
                      size="mini"
                      type="danger"
                      @click="deleteOption(scope.$index)"
                      >删除</el-button
                    >
                  </template>
                </el-table-column>
              </el-table>
            </el-tab-pane>
            <el-tab-pane label="连接池" name="pool" style="height:387px">
              <el-switch
                v-model="formData.usingConnectionPool"
                active-text="使用连接池"
                active-value="Y"
                inactive-value="N"
              >
              </el-switch>
              <div v-show="formData.usingConnectionPool === 'Y'">
                <el-form
                  label-width="180px"
                  size="small"
                  style=" margin-top:10px;"
                >
                  <el-form-item
                    label="连接池初始大小:"
                    style="width:48%;float:left;"
                  >
                    <el-input v-model="formData.initialPoolSize"> </el-input>
                  </el-form-item>
                  <el-form-item
                    label="连接池最大空闲空间:"
                    style="width:48%;float:left;"
                  >
                    <el-input v-model="formData.maximumPoolSize"> </el-input>
                  </el-form-item>
                </el-form>
                <el-table
                  :data="formData.pool_params"
                  border
                  height="300"
                  style="width: 100%;"
                >
                  <el-table-column prop="enabled" align="center" width="65">
                    <template slot-scope="scope">
                      <el-switch v-model="scope.row.enabled" />
                    </template>
                  </el-table-column>
                  <el-table-column prop="name" label="参数名" width="180">
                  </el-table-column>
                  <el-table-column prop="defValue" label="值">
                    <template slot-scope="scope">
                      <el-input
                        v-if="scope.row.enabled == 'Y'"
                        size="small"
                        v-model="scope.row.defValue"
                        style="width: 100%"
                      />
                      <span v-else>{{ scope.row.defValue }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column width="40">
                    <template slot-scope="scope">
                      <el-popover
                        placement="left"
                        title="参数说明"
                        trigger="hover"
                        width="400"
                      >
                        <div>
                          {{ decodeURIComponent(scope.row.description) }}
                        </div>
                        <span slot="reference">
                          <i style="font-size: 16px" class="el-icon-info"></i>
                        </span>
                      </el-popover>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </el-tab-pane>
            <!-- <el-tab-pane label="集群" name="cluster" style="height:387px"
              >集群</el-tab-pane
            > -->
            <el-tab-pane label="特征列表" name="features" style="height:387px">
              <el-table
                :data="featuresList"
                border
                height="350"
                style="width: 100%;"
              >
                <!--序号-->
                <el-table-column
                  type="index"
                  align="center"
                  label="行"
                  fixed
                  class-name="table-index"
                  width="49"
                />
                <el-table-column prop="Parameter" label="Parameter" width="180">
                </el-table-column>

                <el-table-column prop="Value" label="Value"> </el-table-column>
              </el-table>
              <p>共{{ featuresList.length }}行</p>
            </el-tab-pane>
          </el-tabs>
        </el-main>
        <el-footer class="dialog-footer  base-button">
          <el-button @click="handleCancel">取消</el-button>
          <el-button
            type="warning"
            style="margin-left: 20px;margin-right: 20px;"
            @click="handleTest"
            >测试</el-button
          >
          <el-button type="success" @click="handleExplorer">浏览</el-button>
          <el-button type="primary" @click="handleOk">确定</el-button>
        </el-footer>
      </el-container>
    </el-dialog>
    <el-dialog
      :visible.sync="testDialog"
      center
      destroy-on-close
      :close-on-click-modal="false"
      custom-class="customDialog"
      width="450px"
    >
      <div slot="title" class="dialog-title">
        <svg-icon slot="prefix" icon-class="window" />
        <span>数据库连接测试</span>
      </div>
      <div style="height:400px; padding:20px;overflow: auto;">
        <div style="line-height:22px;" v-html="testMessage"></div>
      </div>
    </el-dialog>
    <explorerDialog ref="explorerDialog" />
  </div>
</template>

<script>
import { apiDatabase } from "@/api/etl/database";
import explorerDialog from "@/views/etl/database/explorerDialog";

export default {
  name: "editDatabase",
  components: { explorerDialog },
  data() {
    return {
      loading: false, //加载
      loadingText: "加载中...", //加载描述
      openDialog: false, //弹窗打开或关闭
      dialogTitle: "数据库连接", //弹窗标题
      //表单数据
      formData: {},
      testDialog: false, //测试弹框
      testMessage: "", //测试返回
      activeName: "normal",
      featuresList: [], //特征列表
      databaseTypes: [], //数据库类型
      conTypes: [], //连接类型
      nameLabel: "",
      explorerDialog: false //浏览弹窗
    };
  },
  methods: {
    //打开编辑窗口
    dialogEdit(id, winTitle) {
      //设置标题
      this.dialogTitle = winTitle;
      this.loading = true;
      this.openDialog = true;
      this.activeName = "normal";
      this.featuresList = [];
      apiDatabase
        .open(id)
        .then(res => {
          this.formData = res.data;
          this.loading = false;
          this.conTypeChange(this.formData.access);
          this.getConTypes(this.formData.type);
          console.log(this.formData.supportBooleanDataType);
        })
        .catch(() => {});
    },
    //获取数据库类型
    getDatabaseTypes() {
      apiDatabase.types().then(res => {
        this.databaseTypes = res.data;
      });
    },
    //获取数据库连接类型
    getConTypes(val) {
      apiDatabase.conTypes(val).then(res => {
        this.conTypes = res.data;
      });
    },
    //连接类型改变,类型改变时会联动改变设置信息
    conTypeChange(val) {
      console.log(val);
      switch (val) {
        case 0: //Native
          this.nameLabel = "数据库名称:";
          break;
        case 1: //ODBC
          this.nameLabel = "ODBC DSN源名称:";
          break;
        case 2: //OCI
          this.nameLabel = "SID:";
          break;
        case 4: //JNDI
          this.nameLabel = "JNDI名称:";
          break;

        default:
          this.nameLabel = "数据库名称";
      }
    },
    //取消
    handleCancel() {
      this.openDialog = false;
    },
    //确定
    handleOk() {
      //先进行数据校验
      //保存
      apiDatabase
        .save(JSON.stringify(this.formData))
        .then(res => {
          //触发父组件保存事件
          this.$emit("save");
          this.loading = false;
          this.openDialog = false;
        })
        .catch(() => {
          this.loading = false;
        });
    },
    //测试
    handleTest() {
      this.loading = true;
      this.loadingText = "正在连接中...";
      apiDatabase
        .test(JSON.stringify(this.formData))
        .then(res => {
          this.loading = false;
          this.testDialog = true;
          this.testMessage = decodeURIComponent(res.data).replace(
            /\n/g,
            "<br/>"
          );
        })
        .catch(() => {
          this.loading = false;
        });
    },
    handleClick(tab, event) {
      if (tab.label != "特征列表") return;
      this.loading = true;
      apiDatabase
        .features(JSON.stringify(this.formData))
        .then(res => {
          this.loading = false;
          this.featuresList = res.data;
        })
        .catch(() => {
          this.loading = false;
        });
    },
    //添加选项
    addOption() {
      this.formData.extraOptions.push({ name: "", vaule: "" });
    },
    //删除选项
    deleteOption(index) {
      this.formData.extraOptions.splice(index, 1);
    },
    handleExplorer() {
      this.$refs.explorerDialog.explorerOpen(this.formData);
    }
  },
  created() {
    this.getDatabaseTypes();
  },
  computed: {}
};
</script>

<style scoped></style>
